import React, {Component} from 'react'
import './home.css'
// import sports from '../../img/sports.jpeg'
import ListItem from '../../component/listItem/listItem'
import util from '../../utils/request'
require('../../iconfont/iconfont.css')
class home extends Component{
    constructor (props) {
        super(props)
        this.state = {
            list: [],
            cid: '',
            month: '',
            name: ''
        }
        this.changeMonth = this.changeMonth.bind(this)
        this.changeCid = this.changeCid.bind(this)
    }
    
    render () {
        return (
            <div>
                <div className="header">
                    <div className="search">
                    <i className="iconfont icon icon-search"></i>
                        <input className="searchInput" onChange={this.changeName.bind(this)} placeholder="赛事关键字"/>
                    </div>
                    <button onClick={this.getList.bind(this)}>搜索</button>
                </div>
                <div className="select">
                    <div className="lists">   
                    {/*   value={this.state.month} */}
                        <select onChange={this.changeMonth}>
                            <option value="">全部日期</option>
                            <option value="1">一月</option>
                            <option value="2">二月</option>
                            <option value="3">三月</option>
                            <option value="4">四月</option>
                            <option value="5">五月</option>
                            <option value="6">六月</option>
                            <option value="7">七月</option>
                            <option value="8">八月</option>
                            <option value="9">九月</option>
                            <option value="10">十月</option>
                            <option value="11">十一月</option>
                            <option value="12">十二月</option>
                        </select>
                    </div>
                    <div className="lists" value={this.state.cid} onChange={this.changeCid}>
                        <select>
                            <option value="">全部地区</option>
                            <option value="0">国内</option>
                            <option value="1">国外</option>
                        </select>
                    </div>
                </div>
                {/* <ul className="content"> */}
                {/* {console.log(this.state.list, 555)} */}
                    <ListItem list={this.state.list}/>
                    {/* <li>
                        <div className="contentLeft">
                            <img src={sports} alt=""/>
                        </div>
                        <div className="contentRight">
                            <div className="title">2018咪咕善跑·100</div>
                            <p>2018-09-16  山东五莲</p>
                            <h4>竞赛规程一、组织单位  主办单位中国登山协会山东省体育局承办单位日照市体育局五莲县人民政府</h4>
                            <button>一键报名</button>
                            <button>关注赛事</button>
                        </div>
                    </li>
                </ul> */}
            </div>
        )
    }
    componentDidMount () {
        this.getList()
    }
    changeName (event) {
        this.setState({name: event.target.value}, ()=>{this.getList()})
    }
    changeMonth (event) {
        this.setState({month: event.target.value},()=>{
            console.log(this.state.month)
            this.getList()
        })
    }
    changeCid (e) {
        this.setState({cid: e.target.value}, ()=>{
            this.getList()
        })
        
    }
    getList () {
        console.log(this.state)
        util.get('/api/v1/match/game', {cid: this.state.cid, month: this.state.month, name:this.state.name}).then((res) => {
            this.setState({
                list: res.data
            })
            // console.log(this.state.list, 66)
        })
    }
}
export default home